<template>
	<div class="layout-padding">
		<div class="layout-padding-view" style="overflow: auto">
			<div class="main">
				<el-form ref="dataFormRef" :model="form" label-width="80px" :inline="true">
					<el-form-item :label="t('TalentPool.Industry')" prop="industry">
						<el-cascader
							style="width: 350px"
							filterable
							:options="options.industry"
							v-model="queryForm.industry"
							@change="industrysChange"
							:props="{ checkStrictly: true }"
						/>
					</el-form-item>
					<el-form-item label="人才分布" prop="rcfb">
						<el-cascader
							@change="areaChange"
							placeholder="请选择人才分布"
							:options="regionDataAll"
							v-model="queryForm.area"

							:props="{ checkStrictly: true, value: 'id', label: 'name' }"
						/>
						<!-- <el-select class="input" v-model="state.queryForm.area" placeholder="请选择人才分布" style="width: 240px">
							<el-option v-for="item in regionDataAll" :key="item.id" :label="item.name" :value="item.id" />
						</el-select> -->
					</el-form-item>
					<el-button type="primary" style="margin-bottom: 18px" @click="handleQuery">{{ t('common.queryBtn') }}</el-button>
				</el-form>
				<!-- <treeECharts ref="treeEChartsRef" @change="handleTreeECharts"></treeECharts> -->
				<el-row :gutter="20" style="margin-top: 30px">
					<el-col :span="24" class="mb20">
						<div class="title-wrap">
							<div class="title-left-wrap">
								<div class="title">人才分布</div>
								<div class="dec">分析选中节点下全部人才</div>
							</div>
						</div>
					</el-col>
				</el-row>
				<worldECharts ref="worldEChartsRef"></worldECharts>
				<el-row :gutter="20" style="margin-top: 30px">
					<el-col :span="24" class="mb20">
						<div class="title-wrap">
							<div class="title-left-wrap">
								<div class="title">人才创新质量</div>
								<div class="dec">分析选中节点下全部人才</div>
							</div>
						</div>
					</el-col>
				</el-row>
				<BubbleECharts ref="BubbleEChartsRef"></BubbleECharts>
				<div style="margin-top: 30px;">
					<tableMain ref="tableMainRef" :queryForm="state.queryForm" ></tableMain>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="TalentPool">
import { industryList } from '/@/api/cx/list';
import { getTalentAreaTree } from '/@/api/admin/sysArea';
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n();

// 引入组件
const tableMain = defineAsyncComponent(() => import('/@/components/tableMain/index.vue'));
import treeECharts from './components/treeECharts.vue';
import worldECharts from './components/worldECharts.vue';
import BubbleECharts from './components/BubbleECharts.vue';

// 定义变量内容
const dataFormRef = ref();
const treeEChartsRef = ref();
const worldEChartsRef = ref();
const BubbleEChartsRef = ref();
const queryForm = reactive({
	industry: ['1'],
	area: ['-1'],
});

// 人才分布地区
const regionData = ref([]);
const regionDataAll = computed(() => {
	return [
		{
			name: '全球',
			id: '-1',
		},
		{
			name: '全国',
			id: '1',
			children: [...regionData.value],
		},
	];
});

const state = reactive<any>({
	queryForm: {
		industryId: queryForm.industry.length > 0 ? queryForm.industry[queryForm.industry.length - 1] : '',
		area: queryForm.area.length > 0 ? queryForm.area[queryForm.area.length - 1] : '',
	},
});


// 下拉选项
const options = reactive<any>({
	industry: [],
});

// 产业树扁平化数据
const industryFlat = computed(()=>{
	return treeToList(options.industry) 
})


// 获取产业下拉
function getIndustryList() {
	industryList().then((res) => {
		if (res.code == 0) {
			options.industry = res.data;
		}
	});
}

// 产业选择
function industrysChange(val: any) {
	let result = val.length > 0 ? val[val.length - 1] : '';
	state.queryForm.industryId = result;
}

// 地区选择
function areaChange(val: any) {
	console.log('areaChange', val);
	let result = val.length > 0 ? val[val.length - 1] : '';
	state.queryForm.area = result;
}

// 查询
function handleQuery() {
	nextTick(() => {
		let formData = {
			area: state.queryForm.area,
			industryId: state.queryForm.industryId,
		};
		//treeEChartsRef.value.init(formData);
		worldEChartsRef.value.init(formData);
		BubbleEChartsRef.value.init(formData);
	});
}
// 请求省地区数据
async function getprovince() {
	const { data } = await getTalentAreaTree({ pid: 100000 });
	regionData.value = data;
}

// 点击树形图
function handleTreeECharts(val: any) {
	let list = dg([],val)
	queryForm.industry = list
	industrysChange(queryForm.industry)
	handleQuery()
}

function dg(list:any=[],id:any):any{
	let reult = industryFlat.value.find(n=>n.id == id)
	if(reult){
		list.unshift(reult.id)
		
		if(reult.parentId !== '0'){
			return dg(list,reult.parentId)
		}else{
			return list
		}
	}
}

// 产业数据扁平化
function treeToList(tree: any, result: any = [], level = 0) {
	tree.forEach((node: any) => {
		result.push(node);
		node.level = level + 1;
		node.children && treeToList(node.children, result, level + 1);
	});
	return result;
}

onMounted(() => {
	getprovince();
	handleQuery();
	getIndustryList();
});
</script>

<style lang="scss" scoped>
.main {
	padding: 20px;
}
.tab-head {
	display: flex;
	align-items: center;
	margin-bottom: 12px;
	.num {
		margin-right: 10px;
	}
}
.title-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #eee;
	padding-bottom: 5px;
	.title-left-wrap {
		display: flex;
		align-items: flex-end;
		.title {
			font-size: 18px;
			color: #333333;
			font-weight: bold;
		}
		.dec {
			font-size: 14px;
			color: #646363;
			margin-left: 20px;
		}
	}
}
</style>
